<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen"
	href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="css/jquery-ui-1.10.4.custom.min.css" />
<!--对话框---表单样式-->
<link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/fuelux.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<!-- 对话框---表单 事件函数-->
<script src="js/custom.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;  
$(function(){
	var rowNum=4; //每页显示记录数  
	var nowPage=1; //当前页
	jQuery("#list4").jqGrid(
			{
			    datatype : "local",
			    colNames:['编号','姓名', '活动','创建时间'],   
		        colModel:[   
		            {name:'id',index:'id', width:60, sorttype:"int",editable:true},   
		            {name:'name',index:'name', width:90,editable:true}, 
		            {name:'active',index:'active', width:90,editable:true}, 
		            {name:'createdDate',index:'createdDate',formatter:information,width:90,editable:true},       
		        ],   
		        rowNum:10,//每页显示记录数   
		        viewrecords: true, //是否显示行数   
		        sortname: 'id',
		        //rowList:[4,8,12], //可调整每页显示的记录数   
		        multiselect: false, //是否支持多选   
		        //caption: "信息显示",  
				width: '700',
				height:'100%'
			});	
	
	var mydata = [
		      		{id:"1000",name:"张三",active:"骑马",createdDate:"2014-10-16 13:52:30"},
		      		{id:"1001",name:"李四",active:"跳水",createdDate:"2014-10-16 13:52:30"},
		      		{id:"1002",name:"王二",active:"调高",createdDate:"2014-10-16 13:52:30"},
		      		{id:"1003",name:"麻子",active:"游泳",createdDate:"2014-10-16 13:52:30"},
		      		{id:"1004",name:"张飞",active:"长戟",createdDate:"2014-10-16 13:52:30"},
		      		{id:"1005",name:"关羽",active:"大刀",createdDate:"2014-10-16 13:52:30"},
		      		{id:"1006",name:"刘备",active:"舞剑",createdDate:"2014-10-16 13:52:30"},
		      		{id:"1007",name:"赵云",active:"银枪",createdDate:"2014-10-16 13:52:30"},
		      		{id:"1008",name:"吕布",active:"举重",createdDate:"2014-10-16 13:52:30"},
		      		{id:"1009",name:"黄忠",active:"射箭",createdDate:"2014-10-16 13:52:30"}
		      		];

	for(var i=0;i<=mydata.length;i++){
		jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
	}
$("#cleanData").click(function(){
			jQuery("#list4").jqGrid('clearGridData',true);
		})
$("#update").click(function(){
var id=	$("#list4").jqGrid('getGridParam','selrow');
var cell = $("#list4").jqGrid('getRowData',id);
	uDialog.form({
        title : "修改用户",
        controls : [
                    {id:"user_name",type:"input",label:"名称(*)",tipid:"name_tip",reg:regProjectDesc}, 
                    {id:"user_active",type:"input",label:"活动(*)",tipid:"active_tip",reg:regProjectDesc},
                    {id:"user_createtime",type:"input",label:"时间(*)",tipid:"createtime_tip",reg:regProjectDesc},
                    ],
        buttons : [
                   {id:'project_add_button',click:'confirmAddProject()',type:"submit",text:'确定'}
                   ],
        loadComplete : function(){
        	$("#user_name").val(cell.name);
        	$("#user_active").val(cell.active);
        	$("#user_createtime").val(cell.createdDate);
        }
    });
		})		
		
		
})

function confirmAddProject(){
	//让表单对话框消失
	//clickFlag=true;
}


function information(cellValue,b,c){
	return cellValue;
}

</script>
</head>
<body>
<table id="list4">
</table>
<button id="cleanData">清除</button><button id="update">修改</button>

</body>
</html>